<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<view class="" style="width: 100%;height: 60px;background-color: white;">
					<u-search :clearabled="true" searchIcon="scan" style="padding-top: 16px;width: 94%;margin: 0 auto"></u-search>
				</view>
				<u-row customStyle="margin-bottom: 10px" class="u-myGrid" style="overflow: hidden;">
					<u-grid :border="false" col="5" style="width: 360px;">
						<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" style="width: 90px;">
							<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.name" class="home_myGrid" :size="22" ></u-icon>
							<text class="grid-text">{{listItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</u-row>
				<u-row customStyle="margin-bottom: 10px" class="u-myActivity" style="overflow: hidden;">
					<u-grid :border="false" col="5" style="width: 360px;">
						<u-grid-item v-for="(listItem,listIndex) in swiperList" :key="listIndex" style="width: 90px;">
							<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.name" :size="22" class="home_myGrid"></u-icon>
							<text class="grid-text">{{listItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</u-row>
				<view class="home_body">
					<view class="home_body_details" v-for="(shopList,index) in shopList" :key="index">
						<view class="" @click="ToShopDetails(shopList.id)" >
							<image :src='`http://127.0.0.1:15000/eat-service/fileManager/getImageById?id=${shopList.shopLogo}`' class="home_product_img"></image>
							<view class="home_body_details_rightDiv">
								<p style="font-size: 14px;font-weight: bold;">{{shopList.shopName}}</p>
								<p class="home_score">{{shopList.score}}分</p>
								<p class="home_amount">{{shopList.amount}}<span class="home_distance" >45分钟 2.8km</span></p>
								<p class="home_minPrice">起送 {{shopList.minPrice}} 配送￥1</p>
							</view>
						</view>
					</view>
				</view>	
			</view>
		</view>
		
	</view>
</template>

<script>
	import WebSocket from '@/common/websocket.js';
	import $store from '@/store/index.js';
	export default {
		data() {
			return {
				// 用户id
				id:'',
				// 用户头像
				avatarId:'',
				// 用户昵称
				nickName:'',
				// 店铺信息集合
				shopList:'',
				
				swiperList: [
					{
						name: '/static/icon/7766f90c3ee2f434a59d3f34b9fa47e.jpg',
						title: '热乎报错'
					},
					{
						name: '/static/icon/9f89451300190770a4af3f2e7b485e6.jpg',
						title: '天天大牌'
					},
					{
						name: '/static/icon/725df84c4220812289b3f757a15385e.jpg',
						title: '午餐提前'
					},
					{
						name: '/static/icon/f52837eaad715c7b33fe8237dca07cf.jpg',
						title: '喝点热粥'
					},
				],
				list: [{
					name: '/static/icon/08cd27123614c680d7a405302d49e32.jpg',
 					},
					{
						name: '/static/icon/c524aea06a1cf24c01810f4a00780f2.jpg',
						title: '超市便利'
					},
					{
						name: '/static/icon/bc73ee87f1892a0ace7672551b49a8a.jpg',
						title: '水果鲜花'
					},
					{
						name: '/static/icon/fc027245d16738bed5d26e2c1b7deca.jpg',
						title: '买菜'
					},
					{
						name: '/static/icon/3508a56afc16032da9d204b3694a97e.jpg',
						title: '甜品饮品'
					},
					{
						name: '/static/icon/f83c51cdf9ebe71335e4656134f7efe.jpg',
						title: '汉堡西餐'
					},
					{
						name: '/static/icon/8c2bf92b115925f6f6a9264ee0c17fb.jpg',
						title: '粥粉面点'
					},
					{
						name: '/static/icon/aad70ee48cdc88aa8a17daad394ae71.jpg',
						title: '卤炸小吃'
					},
					{
						name: '/static/icon/aaa2c0ffea662a9da3df5e23c55431b.jpg',
						title: '天天红包'
					},
					{
						name: '/static/icon/7b8525fcb096783a327e999969a475c.jpg',
						title: '0元水果'
					},
					{
						name: '/static/icon/49b9d7c1a90d4d8c503f3c2a301ea4a.jpg',
						title: '拼团'
					},
					{
						name: '/static/icon/2b03cd0ee3d4838c69585b21554ead5.jpg',
						title: '全部'
					},
				],
			}
		},
		mounted(){
			// 查询店铺信息
			this.getAllShop()
		},
		methods: {
			//查询店铺信息
			getAllShop() {
				this.$myRequest({
					url: '/eat-service/shop/getAllShop',
					method: 'get',
				}).then(res => {
					this.shopList = res.data.obj
				})
			},
			// 跳转店铺详情页面
			ToShopDetails(id){
				uni.navigateTo({
					url: '/pages/shop/shopDetail?id=' + id
				})
			},
			input(e) {
				console.log('输入内容：', e);
			},
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			testOpenSetting () {
				const _this = this
				uni.getLocation({
					type: 'wgs84', // <map> 组件默认为国测局坐标gcj02
					altitude: true,
					success: function(res) {
						console.log(123)
						console.log('返回的位置信息', res, _this)
						_this.globalData.userInfo = {
							latitude: res.latitude,
							longitude: res.longitude
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-myActivity{
		width: 94%;
		margin: 0 auto;
		height: 90px;
		background-color: white;
		border-radius: 10px 10px 10px 10px;
	}
	.swiper {
		margin: 0 auto;
		width: 390px;
		height: 75px;
	}
	.u-myGrid{
		margin: 0 auto;
		width: 94%;
		background-color: #F6F6F6;
		border-radius: 10px 10px 10px 10px;
		margin-top: 20px;
	}
	.u-page{
		background-color: #F6F6F6;
		height: 802px;
	}
	.grid-textActivity{
		font-size: 14px;
		color: #909399;
		padding: 20rpx 0rpx 20rpx 10rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 20rpx 0rpx 20rpx 40rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.home_head{
		width: 100%;
		height: 46px;
		background-color: #ff1b1b;
	}
	.home_body{
		width:100%;
		margin-top: 10px;
		height:810px;
		background-color: #F6F6F6;
		overflow: hidden;
	}
	.home_body_details{
		width:94%;
		height:120px;
		border-radius: 12px;
		background-color: white;
		margin: 0 auto;
		margin-top: 20px;;
	}
	.home_product_img{
		width: 110px;
		height: 100px;
		margin-top: 10px;
		border-radius: 12px;
		margin-left: 10px;
		float: left;
	}
	.home_body_details_rightDiv{
		width: 200px;
		height: 100px;
		margin-top: 10px;
		margin-left: 6px;
		float: left;
	}
	.home_searchBar{
		width: 100%;
		height: 60px;
		background-color: white;
	}
	.home_myGrid{
		overflow: hidden;
		margin-left: 20px;
		margin-top:10px;
	}
	.home_score{
		font-size: 10px;
		font-weight: bold;
		color: #848484;
		margin-top:10px;
		color: #e58e41;
	}
	.home_amount{
		font-size: 10px;
		font-weight: bold;
		color: #848484;
		margin-top:2px;
	}
	.home_minPrice{
		 font-size: 10px;
		 font-weight: bold;
		 color: #848484;
		 margin-top:10px;
	}
	.home_distance{
		float:right;
		margin-right: -50px;
	}
</style>
